<script lang="ts">
import userNavi from '@/components/userNavi.vue'
import {ref, onMounted, reactive} from 'vue'
import request from "@/utils/request"
import {useRoute} from "vue-router"
import {Star,StarFilled} from '@element-plus/icons-vue'
import router from "@/router";

export default {
  components:{
    'navi': userNavi
  },
  setup(){
    const id=ref()//商品
    const list=ref<List[]>([])
    const avatarUrls = ref<string[]>([])
    const custNames = ref<string[]>([])
    const route=useRoute()
    const details=reactive({
      proName:"",
      proPrice:"",
      proImg:"",
      proDsc:"",
      proWriter:"",
      proPub:"",
      orderNumber:""
    })
    const num = ref(1)
    const custId=ref('')
    const favStatus=ref(0)
    const handleChange = (value: number) => {
      console.log(value)
    }

    interface List{
      commentId:string
      custId:string
      proId:string
      commentData:string
      commentCreateTime:Date
      commentScore:string
    }


    onMounted(() => {
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
      id.value=route.params.proId
      console.log(id.value)
      goods()
      checkFav()
      getComments()
      // getAvatarUrl()
    })
    const goods= async () =>{
      const res=await request.get(`/goods/${id.value}`)
      console.log(res.data)
      details.proName=res.data.data.proName
      details.proImg=res.data.data.proImg
      details.proDsc=res.data.data.proDescription
      details.proWriter=res.data.data.other1
      details.proPrice=res.data.data.proPrice
      details.proPub=res.data.data.other2
    }
    const onSubmit=async() =>{
      const res=await request.post(`/order/${custId.value}/${id.value}/${num.value}`)
      console.log(res.data)


              details.orderNumber=res.data.data.orderNumber
              console.log(details.orderNumber)
              router.push({

                path: `/order/${details.orderNumber}`,

              })

    }

    const addFav=async()=>{
      const res=await request.post(`/favourite/${custId.value}/${id.value}`)
      console.log(res.data)
      favStatus.value=1
    }

    const removeFav=async()=>{
      const res=await request.get(`/removeFavourite/${custId.value}/${id.value}`)
      console.log(res.data)
      favStatus.value=0
    }

    const checkFav=async()=>{
      const res=await request.get(`/checkFav/${custId.value}/${id.value}`)
      console.log(res.data)
      favStatus.value=res.data.data
    }

    const getComments = async()=>{
      const res=await request.get(`/getComments/${id.value}`)
      list.value=res.data.data
      console.log(res.data)
      console.log(list.value.length)
      for (let i = 0; i < list.value.length; i++) {
        const res1 = await request.get(`/user/getAvatarUrl/${list.value[i].custId}`)
        const res2 = await request.get(`/user/getCustName/${list.value[i].custId}`)
        console.log(res.data.data)
        avatarUrls.value[i] = res1.data.data
        custNames.value[i] =res2.data.data
      }
      console.log(avatarUrls)
    }

    // const getAvatarUrl = async ()=>{
    //   console.log(list.value)
    //   for (let i = 0; i < list.value.length; i++) {
    //     const res = await request.get(`/user/getAvatarUrl/${list.value[i].custId}`)
    //     console.log(res.data.data)
    //     avatarUrls.value[i] = res.data.data
    //   }
    //   console.log(avatarUrls)
    // }

    return{
      id,
      route,
      list,
      avatarUrls,
      custNames,
      details,
      favStatus,
      onMounted,
      custId,
      goods,
      num,
      handleChange,
      Star,
      onSubmit,
      StarFilled,
      addFav,
      removeFav,
      // getAvatarUrl
    }
  }
}
</script>

<template>
  <navi style="margin: auto;width: 1400px" />
  <div class="common-layout">
    <el-container style="width: 1400px">
      <el-container>
        <el-aside width="400px" >
          <img
            :src=details.proImg
            style="width: 100%"
        />
        </el-aside>
        <el-main style="text-align: left">
          <div>
            <p class="proName">{{details.proName}}</p>
            <p class="proDsc">简介:{{details.proDsc}}</p>
            <p class="proWP">作者:{{details.proWriter}}&nbsp;&nbsp;&nbsp;&nbsp;出版社:{{details.proPub}}</p>
            <p class="proPrice">售价:
              <span style="color: red;font-size: 30px">￥{{details.proPrice}}</span>
            </p>
            <p class="num">购买数量:
              <el-input-number  v-model="num" :min="1" :max="10" @change="handleChange" />
            </p>
            <p>
              <el-button type="danger" @click="onSubmit">立即购买</el-button>
              <el-button style="color:#000000" :icon="Star" v-if="favStatus===0" @click="addFav" circle class="star"/>
              <el-button style="color:#f8a315;font-size:20px" :icon="StarFilled" v-if="favStatus===1" @click="removeFav" circle class="star"/>
            </p>
            <p style="font-size: 30px">评论</p>
            <el-scrollbar height="300px" style="border-color: black">
              <div v-for="(item,index) in list" :key="index" class="all">
                <div style="display: flex">
                  <div class="left">
                    <el-avatar :size="50" :src="avatarUrls[index]"/>
                    <p>{{ custNames[index] }}</p>
                  </div>
                  <div class="right">
                    <p>{{item.commentData}}</p>
                    <el-rate v-model="item.commentScore" size="large" disabled />
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<style scoped>
.proName{
  float: left;
  font-size: 30px;
  font-weight: bold;
  margin-top: 0px;
  width: 100%;
}
.proDsc{
  float: left;
  margin-top: 0px;
  width: 100%;
  font-size:20px;
}
.proWP{
  width: 100%;
  font-size:15px;
}
.proPrice{
  width: 100%;
  font-size: 15px;
}
.star:hover{
  background: none;
}
.left{
  margin-right:30px;
}
.right{
  border:1px solid #000000;
  background: #f5f5f5;
  width: 90%;
  border-radius: 15px;
}
.all{
  margin-top: 15px;
}
</style>